import React from 'react'
import PropTypes from 'prop-types'
import { observer, inject } from 'mobx-react'
import ApiModel from '../../../api/apiModel/apiModel'
import SelectData from '../../../components/selectArea/selectData'
import './methodMsg.scss'

@inject('UserStore')
@observer
class MethodMsg extends React.Component {
  static contextTypes = {
    router: PropTypes.object.isRequired,
  }
  constructor(props) {
    super(props)
    this.state = {
      errMsg: '',
      confirmPopFlag: false,
      childName: '',
      childAge: null,
      phoneNum: '',
      schoolName: '',
      tacherName: '',
    }
  }
  componentWillMount() {}
  componentDidUpdate() {}
  componentDidMount() {}
  // 输入框失去焦点
  outFocus = () => {
    window.scrollTo(0, document.documentElement.clientHeight)
  }
  setValue = (e, key) => {
    this.props.UserStore.changeValus(key, e.target.value)
  }

  checkBtnType = () => {
    let {
      mode,
      school,
      phone,
      child_name,
      teacher_name,
      ruleFlag,
      age,
    } = this.props.UserStore
    if (!ruleFlag) {
      return false
    }
    if (mode === 1) {
      // 表示是学校
      if (
        school !== '' &&
        teacher_name !== '' &&
        /^1(3|4|5|7|8)\d{9}$/.test(phone)
      ) {
        return true
      } else {
        return false
      }
    } else {
      if (
        child_name !== '' &&
        age !== '' &&
        /^1(3|4|5|7|8)\d{9}$/.test(phone)
      ) {
        return true
      } else {
        return false
      }
    }
  }

  postSignUp = () => {
    let {
      mode,
      theme,
      themeChild,
      school,
      phone,
      child_name,
      teacher_name,
      age,
    } = this.props.UserStore
    console.log(themeChild)
    let ageStr = age.slice(0, age.length - 1)
    let data = {
      mode,
      theme: parseInt(theme),
      theme_child: parseInt(themeChild),
      school,
      age: parseInt(ageStr || 0),
      phone,
      child_name,
      teacher_name,
    }
    this.setState({ confirmPopFlag: false })
    ApiModel.postUserEntry(data).then((res) => {
      if (res.code === 0) {
        this.props.UserStore.changeUserState('theme')
      } else {
        this.setErrorMsgFun('报名失败<br/>请稍后重试')
      }
    })
    return
  }
  noUseError = () => {
    let {
      mode,
      school,
      phone,
      child_name,
      teacher_name,
      age,
      ruleFlag,
    } = this.props.UserStore
    if (mode === 1) {
      // 表示是学校
      if (school === '') {
        this.setErrorMsgFun('学校信息未填写，<br/>请将信息填写完整后再提交')
        return
      } else if (teacher_name === '') {
        this.setErrorMsgFun('指导老师未填写，<br/>请将信息填写完整后再提交')
        return
      } else if (!/^1(3|4|5|7|8)\d{9}$/.test(phone)) {
        this.setErrorMsgFun('老师手机号未填写，<br/>请将信息填写完整后再提交')
        return
      } else if (!ruleFlag) {
        this.setErrorMsgFun('请同意相关规则')
        return
      }
    } else {
      if (child_name === '') {
        this.setErrorMsgFun('孩子姓名未填写，<br/>请将信息填写完整后再提交')
        return
      } else if (age === 0) {
        this.setErrorMsgFun('孩子年龄未选择，<br/>请将信息填写完整后再提交')
        return
      } else if (!/^1(3|4|5|7|8)\d{9}$/.test(phone)) {
        this.setErrorMsgFun('家长手机号未填写，<br/>请将信息填写完整后再提交')
        return
      } else if (!ruleFlag) {
        this.setErrorMsgFun('请同意相关规则')
        return
      }
    }
  }
  setErrorMsgFun = (errorMsg) => {
    this.props.UserStore.setErrorMsg(true, errorMsg)
    this.timer = setTimeout(() => {
      this.props.UserStore.setErrorMsg(false, '')
    }, 3000)
  }

  // 关闭日期选择弹框
  closeDataPicker() {
    this.setState({ changeEge: false })
  }

  // 修改选择的日期
  changeCheckData(newCheck) {
    console.log(newCheck)
    this.props.UserStore.changeValus('age', newCheck)
    this.setState({
      changeEge: false,
      data: newCheck,
    })
  }
  componentWillUnmount() {
    clearTimeout(this.timer)
  }
  render() {
    const { mode } = this.props.UserStore

    const {
      school,
      teacher_name,
      child_name,
      age,
      phone,
      ruleFlag,
    } = this.props.UserStore
    let schoolDom = (
      <div>
        <div className="input-item">
          <div className="item-title">学校名称：</div>
          <input
            className="input-main"
            onBlur={this.outFocus}
            type="text"
            onChange={(e) => this.setValue(e, 'school')}
            value={school}
            placeholder="请输入学校名称"
          />
        </div>
        <div className="input-item">
          <div className="item-title">指导老师：</div>
          <input
            className="input-main"
            onBlur={this.outFocus}
            type="text"
            onChange={(e) => this.setValue(e, 'teacher_name')}
            value={teacher_name}
            placeholder="请输入指导老师姓名"
          />
        </div>
        <div className="input-item">
          <div className="item-title">老师手机：</div>
          <input
            className="input-main"
            onBlur={this.outFocus}
            type="tel"
            maxLength={11}
            onChange={(e) => this.setValue(e, 'phone')}
            value={phone}
            placeholder="请输入电话号码"
          />
        </div>
      </div>
    )
    let homeDOm = (
      <div>
        <div className="input-item">
          <div className="item-title">孩子姓名：</div>
          <input
            className="input-main"
            onBlur={this.outFocus}
            type="text"
            onChange={(e) => this.setValue(e, 'child_name')}
            value={child_name}
            placeholder="请输入孩子姓名"
          />
        </div>
        <div className="input-item">
          <div className="item-title">孩子年龄：</div>
          <div
            className={age ? 'input-main age' : 'input-main age none'}
            onClick={() => {
              this.setState({ changeEge: true })
            }}
          >
            {age ? age : '请选择孩子年龄'}
          </div>
        </div>
        <div className="input-item">
          <div className="item-title">家长手机：</div>
          <input
            className="input-main"
            onBlur={this.outFocus}
            type="tel"
            maxLength={11}
            onChange={(e) => this.setValue(e, 'phone')}
            value={phone}
            placeholder="请输入电话号码"
          />
        </div>
      </div>
    )
    let confirmPop = (
      <div className="confirm-pop-area">
        <img
          className="pop-icon"
          src={require('../../../static/upload/img_tankuang_bubu@3x.png')}
          alt=""
        />
        <div className="pop-main">
          <div className="pop-desc">
            请确认您的参赛信息是否正确，提交后不可更改
          </div>
          <div className="pop-btns">
            <div
              className="btn-item cancel"
              onClick={() => {
                this.setState({
                  confirmPopFlag: false,
                })
              }}
            >
              取消
            </div>
            <div
              className="btn-item confirm"
              onClick={() => {
                this.postSignUp()
              }}
            >
              确定
            </div>
          </div>
        </div>
      </div>
    )
    return (
      <div className="method-msg-container">
        <div className="method-msg-bkg-area">
          {mode === 1 && (
            <div className="method-msg-title jiating">
              <div className="method-msg-text ">学校参赛报名表</div>
            </div>
          )}
          {mode === 2 && (
            <div className="method-msg-title jiating">
              <div className="method-msg-text ">家庭参赛报名表</div>
            </div>
          )}
        </div>
        <div className="method-msg-area">
          {mode === 1 && <div className="msg-area-title jiating">报名表</div>}
          {mode === 2 && <div className="msg-area-title jiating">报名表</div>}
          <div className="method-msg-input">
            {mode === 1 ? <div>{schoolDom}</div> : <div>{homeDOm}</div>}
            <div className="rules-area">
              <span
                onClick={() =>
                  this.props.UserStore.changeValus('ruleFlag', true)
                }
                className={ruleFlag ? 'rule-icon-check' : 'rule-icon-nocheck'}
              ></span>
              我已阅读并同意
              <span
                className="rule-link"
                onClick={() => this.context.router.history.push('/rules')}
              >
                &nbsp;相关规则
              </span>
            </div>
            {this.checkBtnType() ? (
              <div
                className="signup-btn"
                onClick={() => {
                  this.setState({
                    confirmPopFlag: true,
                  })
                }}
              >
                提交报名
              </div>
            ) : (
              <div
                className="signup-btn no-use"
                onClick={() => {
                  this.noUseError()
                }}
              >
                提交报名
              </div>
            )}
          </div>
        </div>
        {this.state.changeEge ? (
          <SelectData
            province={age}
            closeDataPickerFather={this.closeDataPicker.bind(this)}
            changeCheckDataFather={this.changeCheckData.bind(this)}
          />
        ) : null}

        {this.state.confirmPopFlag && confirmPop}
      </div>
    )
  }
}

export default MethodMsg
